/*eslint-disable*/
import styled from "styled-components";
import { useState } from 'react';
import nowTime from 'nowTime';
import CountDown from './CountDown';
import useTomato from '../useTomato';

require('../assets/icons/clock.svg')
require('../assets/icons/tomato.svg')

const Wrapper = styled.div`
    box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
    border-radius:5px;
    border:1px solid white;
    padding:5px;
    margin-top:15px;
    >.title{
        display:flex;
        padding: 2px 5px;
        justify-content: center;
        align-items:center;
        border-bottom:1px solid #d6d4d4;
        height:40px;
        overflow:auto;
        >.title-icon{
            width:30px;
            height:30px;
            flex-shrink:0;
        }
        >.title-content{
            flex-grow:1;
            margin-left:20px;
            white-space:nowrap;
            overflow:auto;   
        }
    }
    >.clock{
        display:flex;
        justify-content: center;
        font-size:20px;
        align-items:center;
        margin-top:10px;
        >.icon-tomato{
            width:1.5em;
            height:1.5em;
            fill:#567a68;
        }
        >.time{
            color: #7d8bae;
            margin-left:10px;
            font-weight:600;
        }
    }
    
`
type tomato={
    [data:string]:UserTime
}
type UserTime={
    note:string,
    time:string,
}

type to={
        key:number,
        tomato:tomato ,       
}



const Zgn_tomato=(props:to)=>{
    const[toggle,setToggle]=useState(false)
    const{rmTomato}=useTomato()
    const toggleBool=(a:boolean)=>{
        return !a 
    }
    let note=props.tomato[Object.keys(props.tomato)[0]]
    let time=Object.keys(props.tomato)[0]
    let [userTime,setUserTime]=useState(props.tomato[Object.keys(props.tomato)[0]].time)//用户输入的时间  分钟数
    return(
        <Wrapper>
            <div className="title">
                <svg className="title-icon">
                    <use xlinkHref="#tomato" />
                </svg>
                <div className="title-content">{props.tomato[nowTime()].note}</div>
            </div>
            <div className="clock"  onClick={()=>{setToggle(toggleBool(toggle))}}>                
                <svg  className="icon-tomato" >
                    <use xlinkHref="#clock" />
                </svg>                                    
                <div className="time">{userTime}</div>
            </div>
            {toggle?<CountDown onChange={()=>{ setToggle(false)}} rmTomato={()=>{rmTomato(time,note);setToggle(false)}} tomato={userTime}/>:null }
        </Wrapper>
    )
}

export default Zgn_tomato
